<template>
  <footer class="footer">
    <div class="top">
      <ul v-for="item in listarr" :key="item.id">
        <li>
          <a :href="item.url"
            ><h4>{{ item.title }}</h4></a
          >
        </li>
        <li v-for="sitem in item.arr" :key="sitem.id">
          <a :href="sitem.surl">{{ sitem.stitle }}</a>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <ul class="listone">
        <li v-for="item in bottomlist" :key="item.id">
          <a href="#">{{ item.title }}</a>
        </li>
      </ul>
      <ul class="lists">
        <li>©2005-2021雷克萨斯</li>
        <li>中国丰田汽车(中国)投资有限公司</li>
      </ul>
      <ul class="lists">
        <li><a href="#">京ICP备11010962号</a></li>
        <li>
          <img src="@/assets/images/home/home_100000050.png" alt="" /><a
            href="#"
            >京公网安备11010502030819</a
          >
        </li>
      </ul>
    </div>
  </footer>
</template>

<script>
export default {
  name: "CompFooter",
  data() {
    return {
      listarr: [
        {
          title: "车型总览",
          id: "00001",
          url: "#/overview",
          arr: [
            { stitle: "UX 300e", id: "10001", surl: "#/car?id=0" },
            { stitle: "ES", id: "10002", surl: "#/car?id=1" },
            { stitle: "UX", id: "10003", surl: "#/car?id=2" },
            { stitle: "RX", id: "10004", surl: "#/car?id=3" },
            { stitle: "LC", id: "10005", surl: "#/car?id=4" },
            { stitle: "LS", id: "10006", surl: "#/car?id=5" },
            { stitle: "NX", id: "10007", surl: "#/car?id=6" },
            { stitle: "LM", id: "10008", surl: "#/car?id=7" },
            { stitle: "YACHT", id: "10009", surl: "#" },
            { stitle: "车辆筛选", id: "10010", surl: "#/overview" },
            { stitle: "金融计算器", id: "10011", surl: "#/jisuanqi" },
          ],
        },
        {
          title: "品牌天地",
          id: "00002",
          url: "#/brand",
          arr: [
            { stitle: "品牌历史", id: "20001", surl: "#" },
            { stitle: "兼融之道", id: "20002", surl: "#" },
            { stitle: "匠人匠心", id: "20003", surl: "#" },
            { stitle: "设计理念", id: "20004", surl: "#" },
            { stitle: "环保理念", id: "20005", surl: "#" },
            { stitle: "至纯之音", id: "20006", surl: "#" },
            { stitle: "概念车", id: "20007", surl: "#" },
            { stitle: "雷克萨斯品牌杂志", id: "20008", surl: "#" },
            { stitle: "雷克萨斯全球设计大奖", id: "20009", surl: "#" },
            { stitle: "雷克萨斯品牌体验空间", id: "20010", surl: "#" },
            { stitle: "雷克萨斯全球微电影", id: "20011", surl: "#" },
          ],
        },
        {
          title: "电气化",
          id: "00003",
          url: "#/dianqi",
          arr: [
            { stitle: "智·混动车型", id: "30001", surl: "#" },
            { stitle: "电动车型", id: "30002", surl: "#" },
          ],
        },
        {
          title: "F高性能系列",
          id: "00004",
          url: "#/performance",
          arr: [{ stitle: "F高性能系列", id: "40001", surl: "#/performance" }],
        },
        {
          title: "车主服务",
          id: "00005",
          url: "#/service",
          arr: [
            { stitle: "售后服务", id: "50001", surl: "#" },
            { stitle: "e-LEXUS CLUB", id: "50002", surl: "#" },
            { stitle: "智能手机应用", id: "50003", surl: "#" },
            { stitle: "LEXUS Connect", id: "50004", surl: "#" },
            { stitle: "雷克萨斯智行互联", id: "50005", surl: "#" },
            { stitle: "雷克萨斯智能副驾", id: "50006", surl: "#" },
            { stitle: "G-BOOK", id: "50007", surl: "#" },
            { stitle: "雷克萨斯手机互联", id: "50008", surl: "#" },
            { stitle: "雷克萨斯汽车精品", id: "50009", surl: "#" },
            { stitle: "雷克萨斯生活精品", id: "50010", surl: "#" },
            { stitle: "雷克萨斯顾客常见问与答", id: "50011", surl: "#" },
          ],
        },
        {
          title: "新闻资讯",
          id: "00006",
          url: "#/news",
          arr: [{ stitle: "新闻资讯", id: "60001", surl: "#/news" }],
        },
      ],
      bottomlist: [
        { title: "网站地图", id: "1000001", url: "#" },
        { title: "认证二手车", id: "1000002", url: "#" },
        { title: "经销商招募", id: "1000003", url: "#" },
        { title: "人才招聘", id: "1000004", url: "#" },
        { title: "联系我们", id: "1000005", url: "#" },
        { title: "法律声明", id: "1000006", url: "#" },
        { title: "全球网站", id: "1000007", url: "#" },
        { title: "汽车维修技术信息", id: "1000008", url: "#" },
        { title: "环保信息公开", id: "1000009", url: "#" },
        { title: "召回信息公开", id: "1000010", url: "#" },
        { title: "官方微博", id: "1000011", url: "#" },
        { title: "官方微信", id: "1000012", url: "#" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.footer {
  height: 620px;
  .top {
    width: 1140px;
    margin: 0 auto;
    padding: 60px 0 60px 0;
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1px solid #ccc;
    ul {
      li {
        margin-bottom: 5px;
        h4 {
          font-size: 15px;
          color: #000;
        }
      }
      li:nth-child(1) {
        margin-bottom: 15px;
      }
    }
  }
  .bottom {
    width: 1140px;
    margin: 40px auto;
    .listone {
      width: 1140px;
      display: flex;
      justify-content: space-evenly;
      li {
        text-align: center;
        padding-right: 10px;
        border-right: 1px solid #8a8a8a;
      }
      li:last-child {
        border-right: none;
      }
    }
    .lists {
      width: 1140px;
      display: flex;
      margin-top: 15px;
      justify-content: center;
      li {
        font-size: 14px;
        color: #8a8a8a;
        text-align: center;
        padding-right: 10px;
        padding-left: 10px;
        border-right: 1px solid #8a8a8a;
      }
      li:last-child {
        border-right: none;
      }
    }
  }
  a {
    font-size: 14px;
    color: #8a8a8a;
  }
  a:hover {
    color: #000;
  }
}
</style>